<template>
    <!--只能有一个根标签-->
    <el-card class="box-card login">
        <el-form  label-width="60px">
            <el-form-item label="账号">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-button type="success" @click="login">登录</el-button>
        </el-form >
    </el-card>
</template>

<script>
    export default {
        name: "Login",
        data(){   //定义数据
            return {
                user:{username:"",password:""}
            }
        },
        methods:{  //定义函数
            login(){
                console.log(this.user);
                //后台登录
                this.$http.post("/login",
                    this.$qs.stringify(this.user))
                    .then(result => {
                       console.log(result.data.data);
                       //如果返回token，则跳转主页面
                       if(result.data.data){
                           localStorage.setItem("token",result.data.data);
                           this.$router.push({path:"/main"});
                       }
                    });
            }
        }
    }
</script>

<style scoped>
    .login{
        margin: 40px auto;
        width: 400px;
        height: 200px;
    }
</style>
